<template>
	<view class="uni-global-box" >
		<view class="uni-global-title">
			店铺管理 / 店铺列表 / 新增店铺
		</view>
		<view class="body">
			<u-form :model="form" ref="form1" class="u-form" label-width="0" >
				<view class="u-form-textInput">
					<view class="u-form-name">
						<text class="u-form-required">*</text>
						店铺LOGO
					</view>
					<u-form-item prop="logo" :border-bottom="false">
						<uni-file-picker 
							v-model="logo" file-mediatype="image"
							:image-styles="{width:'155'}"
							limit="1"
							@success="successImage('logo',$event)"
						>
							<view class="u-form-image">
								<text class="iconfont icon-shangchuanyunduan"></text>
							</view>
						</uni-file-picker>
						
					</u-form-item>
				</view>
				<view class="u-form-textInput">
					<view class="u-form-name">
						营业执照
					</view>
					<u-form-item prop="logo" :border-bottom="false">
						<uni-file-picker 
							v-model="businessLicense" file-mediatype="image"
							:image-styles="{width:'155'}"
							limit="1"
							@success="successImage('business_license',$event)"
						>
							<view class="u-form-image">
								<text class="iconfont icon-yingyezhizhao"></text>
							</view>
						</uni-file-picker>
						
					</u-form-item>
				</view>
				<view class="u-form-textInput">
					<view class="u-form-name">
						<text class="u-form-required">*</text>
						店铺名称
					</view>
					<u-form-item prop="title" :border-bottom="false">
						<u-input class="u-form-input"   v-model="form.title" style="margin:0" />
					</u-form-item>
				</view>
				<view class="u-form-textInput">
					<view class="u-form-name">
						店铺评分
					</view>
					<u-form-item prop="" :border-bottom="false">
						<u-input class="u-form-input" type="number"  v-model="form.score.grade" style="margin:0" />
					</u-form-item>
				</view>
				<view class="u-form-textInput">
					<view class="u-form-name">
						评价总数
					</view>
					<u-form-item prop="" :border-bottom="false">
						<u-input class="u-form-input"  type="number"   v-model="form.score.score_total" style="margin:0" />
					</u-form-item>
				</view>
				<view class="u-form-textInput">
					<view class="u-form-name">
						好评总数
					</view>
					<u-form-item prop="" :border-bottom="false">
						<u-input class="u-form-input"   type="number"  v-model="form.score.hao_score_total" style="margin:0" />
					</u-form-item>
				</view>
				<view class="u-form-textInput">
					<view class="u-form-name">
						店铺分类
					</view>
					<u-form-item prop="tags" :border-bottom="false">
						<u-radio-group v-model="form.type._id"  >
							<u-radio v-for="(item, index) in rangeClassify" :key="index" :name="item.value"
								:disabled="item.disabled" @change="changeClassify(item)" >
								<text>
									{{ item.text }}
								</text>
							</u-radio>
						</u-radio-group>
					</u-form-item>
				</view>
				<view class="u-form-textInput">
					<view class="u-form-name">
						地址
					</view>
					<u-form-item prop="" :border-bottom="false"  style="" >
						<u-input class="u-form-input" :disabled="true" type="select" @click="goUrl('/pages/system/map')" 
							v-model="form.area.address" style="margin:0;" 
							placeholder="请选择用户坐标"
						/>
					</u-form-item>
				</view>
				<view class="u-form-textInput">
					<view class="u-form-name">
						标签数组
					</view>
					<u-form-item prop="" :border-bottom="false">
						<view class="lable-flex" >
							<view>
								<u-tag v-for="(item,index) in form.label" :text="item" mode="dark" closeable @close="deleteLbel(index)" style="margin-right:3px" />
							</view>
							<view class="" v-if="showLabelInput">
								<u-input class="u-form-input" 
									v-model="label" 
									style="width:100px; margin:0;height:26px;padding:0 5px"
									placeholder="填写新标签"
									focus
									@blur="blurLabel"
									placeholder-style="font-size:12px"
								/>
							</view>
							<view  >
								<u-tag type="success" style="cursor:pointer" text="+ 新增标签" mode="plain"  @click="this.showLabelInput = true;" />
							</view>
						</view>
					</u-form-item>
				</view>
				<view class="u-form-textInput">
					<view class="u-form-name">
						评价数量
					</view>
					<u-form-item prop="" :border-bottom="false">
						<u-input class="u-form-input" type="number" v-model="form.comment.number" style="margin:0" />
					</u-form-item>
				</view>
				<view class="u-form-textInput">
					<view class="u-form-name">
						最近一条评价
					</view>
					<u-form-item prop="" :border-bottom="false">
						<u-input class="u-form-input"   v-model="form.comment.text" style="margin:0" />
					</u-form-item>
				</view>
				<view class="u-form-textInput">
					<view class="u-form-name">
						订单量
					</view>
					<u-form-item prop="" :border-bottom="false">
						<u-input class="u-form-input" type="number"  v-model="form.order" style="margin:0" />
					</u-form-item>
				</view>
				<view class="u-form-textInput">
					<view class="u-form-name">
						技师数量
					</view>
					<u-form-item prop="" :border-bottom="false">
						<u-input class="u-form-input"  type="number" v-model="form.technician" style="margin:0" />
					</u-form-item>
				</view>
				<view class="u-form-textInput">
					<view class="u-form-name">
						店铺状态
					</view>
					<u-form-item prop="" :border-bottom="false">
						<u-form-item label="" prop="radio"  :border-bottom="false">
							<u-radio-group v-model="form.status.value"  >
								<u-radio v-for="(item, index) in radioList2" :key="index" :name="item.value"
									@change="radioStatus(item)"
									:disabled="item.disabled">
									{{ item.name }}
								</u-radio>
							</u-radio-group>
						</u-form-item>
					</u-form-item>
				</view>
				<view class="u-form-textInput">
					<view class="u-form-name">
						审核状态
					</view>
					<u-form-item prop="sort" :border-bottom="false">
						<u-form-item label="" prop="radio"  :border-bottom="false">
							<u-radio-group v-model="form.examine_status.value"  >
								<u-radio v-for="(item, index) in radioList3" :key="index" :name="item.value"
									@change="radioExam(item)"
									:disabled="item.disabled">
									{{ item.name }}
								</u-radio>
							</u-radio-group>
						</u-form-item>
					</u-form-item>
				</view>
				
				<u-button @click="submit" type="primary" >提交</u-button>
			</u-form>
		</view>
		
	</view>
	<u-toast ref="uToast" ></u-toast>
</template>

<script>
	import {rules,radioList3 ,radioList2 } from "/common/js_file/shop.js" ;
	const Shop = uniCloud.importObject("shop",{customUI:true});
	const global = uniCloud.importObject("global",{customUI:true});
	export default {
		data() {
			let form = {
				"title":'',
				"logo":'',
				"score":{
					"grade":50,
					"score_total":0,
					"hao_score_total":0
				},
				"type":{
					"title":"",
					"_id":""
				},
				"area":{
					"province":"",
					"city":"",
					"address":""
				},
				"label":[],
				"user_id":"",
				"comment":{
					"number":0,
					"text":''
				},
				"order":0,
				"technician":0,
				"business_license":"",
				"status":{
					"value":0,
					"text":"正常"
				},
				"examine_status":{
					"value":0,
					"text":"审核中"
				}
			}
			return {
				form,
				rules,
				radioList3, // 是否显示
				radioList2,// 店铺状态
				logo:[],
				businessLicense:[],
				rangeClassify:[],// 服务类型
				label:'',// 标签内容
				showLabelInput:false,// 标签输入框
				coordinate:''
			};
		},
		onLoad(val) {
			this.getClassify();
			// 接收地图返回数据
			uni.$on("address-select",  (res,event)=>{
				this.getAddressData(res,event)
			});
		},
		methods: {
			submit() {
				this.$refs.form1.validate(valid => {
					if (valid) {
						this.add( this.form );
					} else {
						
					}
				});
			},
			add(form){
				form.create_date = Date.now();
				Shop.addData(form).then(result =>  {
					if(result.code == 200){
						this.$refs.uToast.show({
							title: result.message,type: 'success',duration:500,position:'top',
							url: '/pages/shop/shop-list/shop-list'
						})
					}else{
						this.$refs.uToast.show({
							title: result.message,type: 'error',duration:1500,position:'top',
						})
					}
				})
				/**
				 * 
*/
			},
			// 上传图片
			successImage(field,event){
				let filePath = event.tempFilePaths[0];
				this.form[field] =  filePath ;
			},
			// 获取服务类型
			getClassify(){
				global.getList('classify',{is_show:1,type:'shop'},"_id desc","title as text,is_show,_id,_id as value",0,999).then( result =>{
					this.rangeClassify = result.data;
				} )
			},
			// 选择分类
			changeClassify(ev){
				this.form.type = {
					_id:ev._id,
					title:ev.text
				}
			},
			// 接收坐标
			getAddressData(res){
				let province = res.address.substring(0,3);
				let city = res.address.substring(3,6);
				this.form.area = {
					province: province,
					city: city,
					address:res.poiname
				};
			},
			// 标签输入失去焦点
			blurLabel(ev){
				this.form.label.push(ev);
				this.label = '';
				this.showLabelInput = false;
			},
			// 删除标签
			deleteLbel(index){
				this.form.label.splice(index,1);
			},
			// 选择店铺状态
			radioStatus(ev){
				this.form.status.text = ev.name
			},
			radioExam(ev){
				this.form.examine_status.text = ev.name
			},
			goUrl(Url){
				uni.navigateTo({url:Url})
			}
		},
		onReady() {
			this.$refs.form1.setRules(this.rules);
		}
	}
</script>

<style lang="scss">
	.lable-flex{
		display: flex;align-items: center; gap:5px;
	}
	.body{
		width: 50%;
	}
</style>
